<template>
  <div id="app">
    <Carousel />
    <h1>宿 舍 环 境</h1>
    <div class="container">
      <!-- 切换按钮 -->
      <div class="button-group">
        <button data-tab="section1" class="active">北区女舍</button>
        <button data-tab="section2">新白宫女舍</button>
        <button data-tab="section3">玫瑰园男舍</button>
      </div>
      <div class="button-group">
        <button data-tab="section4">独立栋男舍</button>
        <button data-tab="section5">四合院男舍</button>
        <button data-tab="section6">西区宿舍</button>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <div id="section1" class="content active">
          <div class="left">
            <h2 style="margin-top: 150px;">优点</h2>
            <p>1.宿舍门口就有2个饭堂：第一食堂和第四食堂（而且是食堂里面比较好吃的）</p>
            <p>2.篮球场就在隔壁；</p>
            <p>3.离学校三个主要的教学楼也很近</p>
            <p>4.卫浴分开，独立浴室，独立卫生间</p>
          </div>
          <div class="counter">
            <img src="../../assets/宿舍图/1.1.png" />
            <img src="../../assets/宿舍图/1.2.png" />
            <img src="../../assets/宿舍图/1.3.png" />
            <img src="../../assets/宿舍图/1.4.png" />
          </div>
          <div class="right">
             <h2 style="margin-top: 150px;">缺点</h2>
             <p>1.经常被打球声吵醒</p>
             <p>2.距离快递点和图书馆比较远</p>
             <p>3.某一两间宿舍有掉天花板的现象</p>
          </div>
        </div>

        <!-- 2 -->
        <div id="section2" class="content">
          <div class="left">
            <h2 style="margin-top: 150px;">优点</h2>
            <p>1.位于教学楼和快递点的中央；</p>
            <p>2.去哪都很方便；</p>
            <p>3.楼下还有小吃店铺</p>
            <P>4.卫浴分开，独立浴室，独立卫生间</P>
          </div>
          <div class="counter">
            <img src="../../assets/宿舍图/2.1.png" />
            <img src="../../assets/宿舍图/2.2.png" />
            <img src="../../assets/宿舍图/2.3.png" />
            <img src="../../assets/宿舍图/2.4.png" />
          </div>
          <div class="right">
            <h2 style="margin-top: 150px;">缺点</h2>
            <p>门禁卡得很严。。。</p>
          </div>
        </div>

        <!-- 3 -->
        <div id="section3" class="content">
          <div class="left">
            <h2 style="margin-top: 150px;">优点</h2>
            <p>1.位于教学楼和快递点的中央，去哪都很方便；</p>
            <p>2.全校唯一床上有插座的宿舍；</p>
            <p>3.楼下还有小吃店、打印店；</p>
            <p>4.宿舍大，配置也挺好</p>
          </div>
          <div class="counter">
            <img src="../../assets/宿舍图/3.1.png" />
            <img src="../../assets/宿舍图/3.2.png" />
            <img src="../../assets/宿舍图/3.3.png" />
            <img src="../../assets/宿舍图/3.4.png" />
          </div>
          <div class="right">
            <h2 style="margin-top: 150px;">缺点</h2>
            <p>卫浴一体，没有分开</p>
          </div>
        </div>

        <!-- 4 -->
        <div id="section4" class="content">
          <div class="left">
            <h2 style="margin-top: 150px;">优点</h2>
            <p>1.位于邑大黄金地段，上课吃喝一体化中心</p>
            <p>2.距离食堂教学楼都很近</p>
            <p>3.重点是没有门禁</p>
            <p>4.卫浴分开，独立浴室，独立卫生间</p>
          </div>
          <div class="counter">
            <img src="../../assets/宿舍图/4.1.png" />
            <img src="../../assets/宿舍图/4.2.png" />
          </div>
          <div class="right">
            <h2 style="margin-top: 150px;">缺点</h2>
            <p>距离快递点和图书馆比较远</p>
          </div>
        </div>

        <!-- 5 -->
        <div id="section5" class="content">
          <div class="left">
            <h2 style="margin-top: 150px;">优点</h2>
            <p>就在独立栋隔壁，配置跟独立栋相似，不过是木质的</p>
            <p>1.位于邑大黄金地段，上课吃喝一体化中心</p>
            <p>2.距离食堂教学楼都很近</p>
            <p>3.卫浴分开，独立浴室，独立卫生间</p>
          </div>
          <div class="counter">
            <img src="../../assets/宿舍图/5.1.png" />
          </div>
          <div class="right">
            <h2 style="margin-top: 150px;">缺点</h2>
            <p>距离快递点和图书馆比较远</p>
          </div>
        </div>

        <!-- 6 -->
        <div id="section6" class="content">
          <div class="left">
            <h2 style="margin-top: 150px;">优点</h2>
            <p>1.外有水果，桌球，租车等各式商铺（22:30 关闭）</p>
            <p>2.快递最全（中通圆通申通，西门外汇通，南门顺丰全峰）</p>
            <p>3.拥有学校最便宜的食堂！</p>
          </div>
          <div class="counter">
            <p >注意点：混合宿舍群（7楼以下为男生宿舍，以上为女生宿舍）</p>
            <div class="counter">
            <img src="../../assets/宿舍图/6.1.png" />
            <img src="../../assets/宿舍图/6.2.png" />
            <img src="../../assets/宿舍图/6.3.png" />
            <img src="../../assets/宿舍图/6.4.png" />
          </div>
          </div>
          <div class="right">
            <h2 style="margin-top: 150px;">缺点</h2>
            <p>1.上课比较远。。。</p>
            <p>2. 卫浴一体，没有分开</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from "../../components/Carousel.vue";
export default {
  name: "dormitory",
  components: {
    Carousel,
  },
  data() {
    return {
      hrc: "",
    };
  },
  mounted() {
    const buttons = document.querySelectorAll(".button-group button");
    const contents = document.querySelectorAll(".content");

    buttons.forEach((button) => {
      button.addEventListener("click", () => {
        // 移除所有按钮和内容的 active 状态
        buttons.forEach((btn) => btn.classList.remove("active"));
        contents.forEach((content) => content.classList.remove("active"));

        // 设置当前按钮和内容为 active
        button.classList.add("active");
        const target = button.getAttribute("data-tab");
        document.getElementById(target).classList.add("active");
      });
    });
  },
};
</script>

<style scoped>
#app{
  text-align: center;
  background-image: url(../../assets/宿舍图/背景.jpg);
  background-size: cover;
}
.container {
  max-width: 1450px;
  margin: 0 auto;
  padding: 20px;

}
.button-group {
  margin-bottom: 20px;
}
.button-group button {
  padding: 30px 50px;
  margin-right: 30px;
  border: none;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}
.button-group button.active {
  background-color: #db8a34;
  color: white;
}
.button-group button:hover {
  background-color: #ddd;
}
.content-area {
  border: 1px solid #ddd;
  border-radius: 4px;
  float: left;
  display: block;
  line-height: 2.5em;
}
.left{
  width: 250px;
  height: 100%;
  background-color: #f8f3d4;
  display: block;
  float: left;
}
.counter{
  width: 900px;
  height: 100%;
  background-color: #a2e0f6;
  display: block;
  float: left;
}
.right{
  width: 250px;
  height: 100%;
  background-color: #ffde7d;
  display: block;
  float: left;
}
.content {
  display: none;
  height: 700px;
}
.content.active {
  display: block;
}
/* 取消图片inline样式！ */
img{
  display: block;
  float: left;
  width: 400px;
  height: 300px;
  margin: 20px 20px;
  transition: 0.5s;
  cursor: pointer;
}
img:hover{
  transform: scale(1.2);
}
</style>